<#import "/spring.ftl" as spring /> <#import
"../layout/defaultLayout.ftl" as layout> <@layout.defaultLayout
styles=["bootstrap-table/bootstrap-table.min.css",
"bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css",
"x-editable/bootstrap3-editable/css/bootstrap-editable.css"]
scripts=["bootstrap-table/bootstrap-table.min.js",
"bootstrap-table/locale/bootstrap-table-zh-CN.min.js",
"bootstrap-validator/validator.js",
"jquery/serializejson/jquery.serializejson.min.js",
"util/jquery-dateFormat.min.js",
"bootstrap-table/extensions/export/bootstrap-table-export.min.js",
"bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js",
"bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js",
"bootstrap-table/extensions/editable/bootstrap-table-editable.js",
"x-editable/bootstrap3-editable/js/bootstrap-editable.js",
"util/tableExport.js"]>
<style type="text/css">
.outsideBlock{
	background-color:#fff;
	margin:10px 0;
	overflow:hidden;
	border:1px solid #ddd;
	padding-bottom:10px;
	}
</style>

<div class="container-fluid">
	<div class="container">
		<fieldset>
			<legend>
				<span class="glyphicon glyphicon-th-list"></span>&nbsp;&nbsp;<@spring.message "config.legend" />
			</legend>
			<div id="toolbar" style="margin-top:15px;margin-bottom:10px;">
				<button id="insert" class="btn btn-info">
					<i class="glyphicon glyphicon-plus"></i> <@spring.message "button.add" />
				</button>
				<button id="edit" class="btn btn-info" style="display:none;">
					<i class="glyphicon glyphicon-pencil"></i> <@spring.message "button.edit" />
				</button>
				<button id="delete" class="btn btn-info">
					<i class="glyphicon glyphicon-remove"></i> <@spring.message "button.delete" />
				</button>
			</div>
			<table id="conditionEnumTable"
				data-classes="table table-hover table-striped" data-toggle="table"
				data-pagination="true" data-page-list="[10]"
				data-side-pagination="client" data-method="post"
				data-url="${request.contextPath}/config/condition/items">
				<thead>
					<tr>
						<th data-checkbox="true"  data-events="isTableColEvents"></th>
						<th data-field="ID" data-visible="false"></th>
						<th data-field="NAME" data-halign="center" ><@spring.message "component.name"/></th>
						<th data-field="STYPE" data-halign="center" ><@spring.message "component.code"/></th>
						<th data-field="ITEMVAL" data-halign="center" ><@spring.message "component.itemVal"/></th>
						<th data-field="ITEMNAME" data-halign="center"
							><@spring.message "component.itemName"/></th>
						<th data-field="SORTORDER" data-halign="center"
							><@spring.message "component.sortOrder"/></th>
					</tr>
				</thead>
			</table>
		</fieldset>
		<div class="outsideBlock">
		<div style="padding-left: 5%; padding-right: 5%;margin-top:25px;">
		<form name="editForm" id="editForm">
			<div class="btn-group btn-group-justified">
				<div class="btn-group">
					<label><@spring.message "component.name"/></label><input type="text"
						name="groupName" id="groupName" value="" />
				</div>
				<div class="btn-group">
					<label><@spring.message "component.code"/></label><input type="text"
						name="groupCode" id="groupCode" value="" />
				</div>
				<div class="btn-group">
					<label><@spring.message "component.itemName"/></label><input type="text"
						name="itemName" id="itemName" value="" />
				</div>
			</div>
			<br>
			<div class="btn-group btn-group-justified">
				<div class="btn-group">
					<label>&nbsp;&nbsp;<@spring.message "component.itemVal"/></label><input type="text"
						name="itemValue" id="itemValue" value="" />
				</div>
				<div class="btn-group">
					<label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<@spring.message "component.sortOrder"/></label><input type="text"
						name="order" id="order" value="" />
				</div>
				<div class="btn-group">
				</div>
			</div>
		</form>
		<div style="text-align: right; width: 100%;margin-top:25px;">
			<button id="cancel" class="btn btn-success" style="width: 100px;"><@spring.message "button.clear"/></button>
			<button id="submit" class="btn btn-success" style="width: 100px;"><@spring.message "button.submit"/></button>
		</div>
	</div>
	</div>
	</div>

</div>
<script>	
	var conditionEnumTable = $('#conditionEnumTable');
	var editId = 0;
	var doType = '';// 操作类型
	
	//监控组件checkBox选择事件
	function inputFormatter(value, row, val){
		return '<i class="glyphicon glyphicon-heart"></i> <i class="glyphicon glyphicon-remove"></i>';
	}
	
	//监控组件checkBox选择事件
	window.isTableColEvents = {
	        'change :checkbox': function (e, value, row, index) {
	        	doDisable(false);
	            var flag = $(e.target).prop('checked');
	            if(flag){
	            	editId = row.ID;
	            	document.getElementById("groupName").value = row.NAME;
	            	document.getElementById("groupCode").value = row.STYPE;
	            	document.getElementById("itemName").value = row.ITEMNAME;
	            	document.getElementById("itemValue").value = row.ITEMVAL;
	            	document.getElementById("order").value = row.SORTORDER;
	            }
	        }  	
	    };

	
	$('#insert').click(function(){
		doDisable(false);
		clear();
	});
	
	$("#edit").click(function(){
		
	});
	
	$('#submit').click(function(){
		var object = {};
		if(editId != 0){
			object.ID = editId;
		}
		object.NAME = document.getElementById("groupName").value;
		object.STYPE = document.getElementById("groupCode").value;
		object.ITEMNAME = document.getElementById("itemName").value;
		object.ITEMVAL = document.getElementById("itemValue").value;
		object.SORTORDER = document.getElementById("order").value;
		var jsonString = JSON.stringify(object);
 		$.ajax({
	        url:'${request.contextPath}/config/condition/addOrEditConditionEnum',
	        type:'post',
	        contentType: 'application/json',
	        data:jsonString,
	        dataType:'json',
	        success:function(data){
	        	alert("<@spring.message 'msg.dealSuccess' />");
	        	clear();
	        	$('#conditionEnumTable').bootstrapTable('refresh');
	        	
	        }
		});
	});	
	
	$('#cancel').click(function(){
		clear();
	});
	
	 function doDisable(flag){
		 if (flag){
			 $("input[type='text']").prop("disabled","disabled");
		 }else {
			 $("input[type='text']").prop("disabled","");
		 }
	 }
	
	//清空编辑内容
	function clear(){
		editId = 0;
    	document.getElementById("groupName").value = "";
    	document.getElementById("groupCode").value = "";
    	document.getElementById("itemName").value = "";
    	document.getElementById("itemValue").value = "";
    	document.getElementById("order").value = ""; 
	}
	
	
	//item删除
	$('#delete').click(function () {
			if ($('#conditionEnumTable').bootstrapTable('getSelections').length == 0){
				alert("<@spring.message 'msg.chooseDataWillBeDel' />");
				return false;
			}
        	//需要弹出框进行校验下
        	var ids = $.map($('#conditionEnumTable').bootstrapTable('getSelections'), function (row) {
                  return row.ID
            });
        	//弹出确认框
        	 bootbox.confirm("<@spring.message 'msg.confirmDelete' />", function (result) {
        		var strResult = result;
        		if(strResult){
        			$.ajax({
            	        url:'${request.contextPath}/config/condition/deleteConditonEnum',
            	        type:'post',
            	        contentType: 'application/json',
            	        data:JSON.stringify(ids),
            	        dataType:'json',
            	        success:function(data){
            	        	alert("<@spring.message 'msg.deleteSuccess' />");
            	        	clear();
            	        	$('#conditionEnumTable').bootstrapTable('refresh');
            	        }
            		});
        		}
      		 });
    	});
	
	$(function(){
		doDisable(true);
	});
	

</script>
</@layout.defaultLayout>
